<template>
  <a-modal
    v-if="record"
    :title="`为用户“${record.user_name}”设置角色`"
    v-model="$parent.showRoleModel"
    :footer="null"
    :width="760"
    class="setRole"
  >
    <a-spin size="large" tip="加载中..." :spinning="spinning">
      <div class="spin-content">
        <div class="column" style="border-right:1px solid #ddd;">
          <div class="header">
            <div class="title">已有的角色</div>
            <div class="search">
              <a-input-search size="small" placeholder="请输入用户名" @search="onSearch" />
            </div>
          </div>
          <div class="content">
            <div
              @click="removeRole(item,index)"
              :key="index"
              class="item"
              v-for="(item,index) in checkedRoles"
            >
              <div class="text">{{item.role_name}}</div>
              <div class="btn">
                <a-icon type="right-circle" />
              </div>
            </div>
          </div>
          <div class="foot"></div>
        </div>
        <div class="column">
          <div class="header">
            <div class="title">尚无的角色</div>
            <div class="search">
              <a-input-search size="small" placeholder="请输入用户名" @search="onSearch" />
            </div>
          </div>
          <div class="content">
            <div
              @click="setRole(item,index)"
              :key="index"
              class="item"
              v-for="(item,index) in elseRoles"
            >
              <div class="text">{{item.role_name}}</div>
              <div class="btn">
                <a-icon type="left-circle" />
              </div>
            </div>
          </div>
          <div class="foot"></div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
//todo 搜索用户，翻页
export default {
  data() {
    return {
      checkedRoles: [],
      elseRoles: [],
      record: null,
      spinning: false
    };
  },
  mounted() {},
  methods: {
    onSearch() {
      //todo:
    },
    async setRole(item, index) {
      this.spinning = true;
      let result = await this.$post("/system/userRole/giveRoleToUser", {
        role_id: item.id,
        user_id: this.record.id
      });
      if (result.error) return;
      this.$notification.success({ message: "设置成功" });
      this.checkedRoles.splice(0, 0, item);
      this.elseRoles.splice(index, 1);
      this.spinning = false;
    },
    async removeRole(item, index) {
      this.spinning = true;
      let result = await this.$post("/system/userRole/removeRoleFromUser", {
        role_id: item.id,
        user_id: this.record.id
      });
      if (result.error) return;
      this.$notification.success({ message: "设置成功" });
      this.elseRoles.splice(0, 0, item);
      this.checkedRoles.splice(index, 1);
      this.spinning = false;
    }
  }
};
</script>
<style>
.setRole .ant-modal-body {
  padding: 12px !important;
}
</style>

<style socped lang="scss">
.setRole {
  .spin-content {
    display: flex;
  }
  .foot {
    height: 38px;
  }
  .btn {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    color: #1890ff;
  }
  .text {
    display: inline-block;
    padding-left: 8px;
  }
  .item {
    line-height: 32px;
    height: 32px;
    display: inline-block;
    background: #e6f7ff;
    margin: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e6f7ff;
  }
  .item:hover {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  .content {
    padding-top: 12px;
    flex: 1;
    overflow-y: auto;
  }
  .title {
    height: 24px;
    line-height: 24px;
    flex: 1;
  }
  .search {
    width: 160px;
  }
  .header {
    display: flex;
  }
  .column {
    width: 50%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    height: 380px;
  }
}
</style>


